<div
	#loadingScreen
	style="background-color: #1f2937; height: 100%; width: 100%; position: absolute; z-index: 9999"
></div>
<div
	*ngIf="!modalContent()"
	class="relative flex flex-row w-full h-full font-sans"
	[ngClass]="['text' + defaultInv, (isDarkTheme | async) ? 'bg-gray-900' : 'bg-gray-200']"
>
	<div class="flex flex-col w-full h-auto mt-20 overflow-y-auto" (click)="closeMenu()">
		<custom-header></custom-header>
		<custom-menu></custom-menu>
		<!-- <custom-breadcrumb></custom-breadcrumb> -->
		<main class="flex-1">
			<custom-settings></custom-settings>
			<router-outlet></router-outlet>
		</main>
		<custom-footer></custom-footer>
	</div>
</div>
<custom-fullscreen-modal *ngIf="modalContent()"></custom-fullscreen-modal>
<span
	*ngIf="devMode"
	style="z-index: 999"
	class="fixed bottom-0 right-0 px-3 py-2 text-gray-100 bg-gray-900 rounded-tl-lg"
>
	<span class="sm:hidden">XS</span>
	<span class="hidden sm:block md:hidden">SM</span>
	<span class="hidden md:block lg:hidden">MD</span>
	<span class="hidden lg:block xl:hidden">LG</span>
	<span class="hidden xl:block 2xl:hidden">XL</span>
	<span class="hidden 2xl:block">XXL</span>
</span>
